<template>
  <el-dialog
    v-model="visible"
    title="新增退货单"
    width="900px"
    class="return-order-dialog"
    :close-on-click-modal="false"
  >
    <!-- 顶部筛选条件 -->
    <el-row>
      <el-col :span="8">
        <el-form-item label="订单类型">
          <el-radio-group v-model="form.afterSaleType">
            <el-radio v-for="orderType in orderTypeOptions" :value="orderType.value">{{
              orderType.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="1"> </el-col>
      <el-col :span="15">
        <el-form-item label="订单号">
          <el-input v-model="form.orderId" placeholder="请选择或输入订单号" readonly>
            <template #suffix>
              <el-button @click="handleQuery" type="primary" size="mini" link>选择</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 订单信息展示 -->
    <div class="info-section">
      <div class="section-title">
        <span class="label">客户信息</span>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="客户姓名">{{
            orderInfo?.receiverName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            orderInfo?.receiverPhone || '--'
          }}</el-descriptions-item>
          <el-descriptions-item span="4" label="退货地址">{{
            orderInfo?.receiverAddress || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{
            orderInfo?.orderTime || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="客户类型">{{
            orderInfo?.channelType || '--'
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section-title">
        <span class="label">付款信息</span>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="订单金额">{{
            orderInfo?.actualPrice || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="预付金额">{{
            orderInfo?.prepaid || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="代收金额">{{ orderInfo?.cod || '--' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="section-title">
        <span class="label">商品信息</span>
        <el-table :data="orderInfo?.productCollection || []" border empty-text="暂无商品信息">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="productSpec" label="商品规格" />
          <el-table-column prop="num" label="商品/套餐数" width="180">
            <template #default="scope">
              <!-- 支持修改数量 -->
              <el-input-number
                v-model="scope.row.num"
                :min="1"
                controls-position="right"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <el-table-column prop="totalUnitNum" label="总数量" width="180">
            <template #default="scope">
              <!-- 支持修改数量 -->
              <el-input-number
                v-model="scope.row.totalUnitNum"
                :min="1"
                controls-position="right"
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column prop="actualPrice" label="订单实付" width="120">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.actualPrice"
                :min="1"
                :max="scope.row.actualPrice"
                controls-position="right"
                style="width: 100%"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 退货备注 -->
    <el-form label-width="80px" class="remark-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="退货单号">
            <el-input
              v-model="form.returnDeliverNo"
              maxlength="20"
              show-word-limit
              placeholder="请输入退货单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1"> </el-col>
        <el-col :span="11">
          <el-form-item label="退货类型">
            <el-select
              v-model="form.type"
              placeholder="请选择退货类型"
              clearable
              :options="returnTypeOptions"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="退货备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入退货备注" />
      </el-form-item>
    </el-form>

    <!-- 底部操作按钮 -->
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认创建</el-button>
    </template>
  </el-dialog>

  <!-- 选择订单 -->
  <orderSelectionDialog
    ref="orderDialogRef"
    :type="form.afterSaleType"
    :goodsTypes="goodsTypes"
    @select="handleOrderSelect"
  />
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose } from 'vue';
import { createSale } from '../../api/sale';
import { ElMessage } from 'element-plus';

interface Option {
  value?: any;
  label?: string;
  [key: string]: any;
}

withDefaults(
  defineProps<{
    orderTypeOptions?: Option[];
    returnTypeOptions?: Option[];
    goodsTypes?: Option[];
  }>(),
  {
    // 订单类型
    orderTypeOptions: () => [],
    // 退货类型
    returnTypeOptions: () => [],
    // 商品类型
    goodsTypes: () => []
  }
);

const visible = ref(false);
const orderDialogRef = ref<any>();
const emits = defineEmits(['ok']);
const form = reactive<any>({
  afterSaleType: '',
  orderId: '',
  returnType: '3',
  returnDeliverNo: '',
  remark: '',
  relatedOrderId: '',
  products: [],
  orderPrice: 0,
  actualPrice: 0,
  totalAmount: 0,
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  orderTime: ''
});

const orderInfo = ref<any>(null);

const handleQuery = () => {
  orderDialogRef.value.show();
};

function handleSubmit() {
  // 判断单号 退货类型 备注 必填
  if (!form.returnDeliverNo) {
    ElMessage.error('请输入退货单号');
    return;
  }
  if (!form.type) {
    ElMessage.error('请选择退货类型');
    return;
  }
  if (!form.remark) {
    ElMessage.error('请输入退货备注');
    return;
  }
  createSale(form)
    .then((res: any) => {
      visible.value = false;
      if (res.code === 200) {
        emits('ok');
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
}

// 选择订单
const handleOrderSelect = (row: any) => {
  form.orderId = row.orderId;
  form.goods = row.productCollection;
  orderInfo.value = row;
};

function show(row: any) {
  if (row) {
    form.afterSaleType = '2';
    form.orderId = row.orderId;
    form.disabled = true;
    orderInfo.value = row;
  } else {
    form.afterSaleType = '1';
    form.orderId = '';
    form.disabled = false;
    orderInfo.value = null;
  }
  visible.value = true;
}

defineExpose({
  show
});
</script>

<style scoped lang="scss">
.return-order-dialog {
  .query-form {
    margin-bottom: 15px;
  }

  .info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }

  .section-title {
    border: 1px solid #ebebeb;
    padding: 40px 20px 20px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;

    .label {
      position: absolute;
      display: inline-block;
      padding: 5px 10px;
      background: #ebebeb;
      font-size: 13px;
      margin-bottom: 10px;
      border-radius: 0 4px 4px 0;
      left: 0;
      top: 0;
    }

    .product-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }

  .empty-hint {
    padding: 12px;
    text-align: center;
    color: #999;
    font-size: 13px;
  }
}
</style>
